<template>
  <div class="sxWrapper">
    <section
      style="height: calc(100% - 80px); padding: 16px 16px 0 16px"
      class="self-scroll"
    >
      <div>
        <div class="sxTop">
          <div>设置分析步长:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
          <el-select
            v-model="step"
            filterable
            clearable
            allow-create
            default-first-option
            placeholder="请选择或输入步长"
            class="select-step"
          >
            <el-option
              v-for="item in stepOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <sx-category class="categoryCom" :title="title1" :dataList="$store.state.knowledgeMap.entityTypeList"></sx-category>
        <sx-category class="categoryCom" :title="title2" :dataList="$store.state.knowledgeMap.relationTypeList"></sx-category> -->
        <div class="entity-type">
          <section class="name">
            <p>筛选实体类别</p>
            <el-checkbox
              :indeterminate="isIndeterminateEntity"
              v-model="checkAllEntity"
              @change="CheckAllChangeEntity"
            >
              全选</el-checkbox
            >
          </section>
          <section class="search">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              @change="entitySearch"
              v-model="searchEntity"
            >
            </el-input>
          </section>
          <section class="select-content">
            <el-checkbox-group
              v-model="checkedEntity"
              @change="handleCheckedEntityChange"
              class="self-scroll"
            >
              <el-checkbox
                v-for="(item, index) in entityType"
                :label="item.ontologyId"
                :key="index"
              >
                {{ item.ontologyName }}</el-checkbox
              >
            </el-checkbox-group>
          </section>

          <!-- <el-select v-model="selectEntity" multiple  placeholder="请选择" class="select">
          <el-option
            v-for="item in entityType"
            :key="item.ontologyId"
            :label="item.ontologyName"
            :value="item.ontologyId">
          </el-option>
        </el-select> -->
        </div>
        <div class="relation-type">
          <section class="name" style="margin-top: 16px">
            <p>筛选关系类别</p>
            <el-checkbox
              :indeterminate="isIndeterminateRelation"
              v-model="checkAllRelation"
              @change="CheckAllChangeRelation"
              >全选</el-checkbox
            >
          </section>
          <section class="search">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              @change="relationSearch"
              v-model="searchRelation"
            >
            </el-input>
          </section>
          <section class="select-content">
            <el-checkbox-group
              v-model="checkedRelation"
              @change="handleCheckedRelationChange"
              class="self-scroll"
            >
              <el-checkbox
                v-for="(item, index) in relationType"
                :label="item.relationId"
                :key="index"
              >
                {{ item.relationName }}</el-checkbox
              >
            </el-checkbox-group>
          </section>
          <!-- <el-select v-model="selectRelation" multiple  placeholder="请选择" class="select">
        <el-option
          v-for="item in relationType"
          :key="item.relationId"
          :label="item.relationName"
          :value="item.relationId">
        </el-option>
      </el-select> -->
        </div>
        <div class="direction">
          <p style="margin-top: 16px; margin-bottom: 2px">设置查询关系的方向</p>
          <div class="direction-option">
            <el-radio class="direction-radioItem" v-model="radio" label="2"
              >双向</el-radio
            >
            <el-radio class="direction-radioItem" v-model="radio" label="0"
              >正向</el-radio
            >
            <el-radio class="direction-radioItem" v-model="radio" label="1"
              >反向</el-radio
            >
          </div>
        </div>
      </div>
    </section>
    <div class="btn" @click="sxAnalyse">筛选</div>
  </div>
</template>

<script>
// import sxStepLength from "./sx-step-length.vue"
import sxCategory from "./sx-category.vue";
// import {
//   filterGraph
// } from "@/api/atlas-analyse.js"
// import {
//   changeKey
// } from "@/utils/index.js"
export default {
  name: "sx",
  components: {
    // sxStepLength,
    // sxCategory
  },
  props: {
    projectId: {
      type: String,
      required: true,
      default: "",
    },
    Neo4j: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title1: "实体",
      title2: "关系",
      radio: "0",
      stepOptions: [
        {
          value: 1,
          label: "1",
        },
        {
          value: 2,
          label: "2",
        },
        {
          value: 3,
          label: "3",
        },
        {
          value: 4,
          label: "4",
        },
      ],
      step: 1,
      entityType: [],
      allrelationType: [],
      allentityType: [],
      relationType: [],
      selectEntity: [],
      selectRelation: [],
      isIndeterminateEntity: false,
      checkAllEntity: true,
      searchEntity: "",
      checkedEntity: [],
      isIndeterminateRelation: false,
      checkAllRelation: true,
      searchRelation: "",
      checkedRelation: [],
    };
  },
  created() {
    this.getEntityType();
    this.getRelationType();
  },
  methods: {
    sxAnalyse() {
      if (!Object.keys(this.Neo4j).length) {
        this.$message.warning("请先选择筛选对象!");
        return;
      }
      console.log("aaaaaa", this.Neo4j);
      const params = {
        stepLength: Number(this.step),
        entityTypes: this.checkedEntity,
        relationTypes: this.checkedRelation,
        direction: this.radio,
        nodeIds: this.Neo4j._cfg.id,
      };
      this.$axios
        .post(this.$api.knowledgeMap.filterGraph, params)
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            // this.$message.success(message);
            let data1 = {
              Nodes: data.Nodes,
              Edges: data.Edges,
            };
            // 解决G6 id不是string类型的报错
            data1.Nodes.forEach((item) => {
              item.id = item.id.toString();
              item.entity_id = item.nodeId;
              item.label = item.name;
            });
            data1.Edges.forEach((item) => {
              item.source = item.startNodeId;
              item.target = item.endNodeId;
            });
            this.$eventBus.$emit("canvasData", data1);
          } else {
            this.$message.error(message);
          }
        });
    },
    getEntityType() {
      let params = {
        projectId: this.projectId,
      };
      this.$axios
        .get(this.$api.knowledgeMap.getEntityType, {
          params,
        })
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            this.entityType = data;
            this.allentityType = data;
            // this.checkedEntity = data.list.map(item => {
            this.checkedEntity = data.map((item) => {
              return item.ontologyId;
            });
          } else {
            this.$message.error(message);
          }
        });
    },
    getRelationType() {
      this.$axios
        .get(
          `${this.$api.knowledgeMap.getRelationType}?projectId=${this.projectId}`
        )
        .then((res) => {
          const { data, code, message } = res.data;
          if (code === 200) {
            this.relationType = data;
            this.allrelationType = data;
            // this.checkedRelation = data.list.map(item => {
            this.checkedRelation = data.map((item) => {
              return item.relationId;
            });
          } else {
            this.$message.error(message);
          }
        });
    },
    CheckAllChangeEntity(val) {
      this.checkedEntity = val
        ? this.allentityType.map((item) => {
            return item.ontologyId;
          })
        : [];
      this.isIndeterminateEntity = false;
    },
    handleCheckedEntityChange(value) {
      console.log("fdfd", this.checkedEntity);
      let checkedCount = value.length;
      this.checkAllEntity = checkedCount === this.allentityType.length;
      this.isIndeterminateEntity =
        checkedCount > 0 && checkedCount < this.allentityType.length;
    },
    entitySearch() {
      if (this.searchEntity != "") {
        this.entityType = this.allentityType.filter((item) => {
          return (
            item.ontologyName
              .toLowerCase()
              .indexOf(this.searchEntity.toLowerCase()) > -1
          );
        });
      } else {
        this.entityType = this.allentityType;
      }
    },
    CheckAllChangeRelation(val) {
      this.checkedRelation = val
        ? this.allrelationType.map((item) => {
            return item.relationId;
          })
        : [];
      this.isIndeterminateRelation = false;
    },
    handleCheckedRelationChange(value) {
      console.log("fdfd", this.checkedRelation);
      let checkedCount = value.length;
      this.checkAllRelation = checkedCount === this.allrelationType.length;
      this.isIndeterminateRelation =
        checkedCount > 0 && checkedCount < this.allrelationType.length;
    },
    relationSearch() {
      if (this.searchRelation != "") {
        this.relationType = this.allrelationType.filter((item) => {
          return (
            item.relationName
              .toLowerCase()
              .indexOf(this.searchRelation.toLowerCase()) > -1
          );
        });
      } else {
        this.relationType = this.allrelationType;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../../../assets/scss/scroll";

// 单项选择器的样式
/deep/ .el-radio__input.is-checked + .el-radio__label {
  height: 19px;
  font-size: 14px;
  color: #333333;
  line-height: 19px;
}

/deep/ .el-radio {
  color: #333333;

  .el-radio__inner {
    background: #fff;
    border-color: #b7bbc7;

    &::after {
      width: 10px;
      height: 10px;
      border-radius: 100%;
      background-color: #4b71eb;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
}

.sxWrapper {
  // .headCom {
  //   margin-bottom: 30px;
  // }
  position: relative;
  height: 100%;

  .select {
    width: 100%;
    background: #f3f4f8;
    margin-bottom: 26px;
  }

  .entity-type,
  .relation-type {
    .name {
      display: flex;
      justify-content: space-between;
    }

    .search {
      /deep/ .el-input__inner {
        border: none;
        border-bottom: 1px solid #dcdfe6;
        margin-top: 4px;
        margin-bottom: 16px;
        box-shadow: none;
        border-radius: 0;
      }

      /deep/ .el-input__prefix {
        left: -4px;
        top: -4px;
      }
    }

    .select-content {
      border-bottom: 1px solid #dcdfe6;

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        max-height: 188px;
        // &::-webkit-scrollbar {
        //   /*滚动条整体样式*/
        //   width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
        //   height: 1px;
        //   }
        //   &::-webkit-scrollbar-thumb {
        //   /*滚动条里面小方块*/
        //   border-radius: 10px;
        //   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        //   background   : #B7BBC7;
        //   }
        //   &::-webkit-scrollbar-track {
        //   /*滚动条里面轨道*/
        //   box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        //   border-radius: 10px;
        //   // background   : #ededed;
        // }
      }

      /deep/ .el-checkbox {
        margin-bottom: 10px;
        color: #333333;
      }
    }
  }

  .sxTop {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 18px;
    align-items: center;

    .select-step {
      /deep/ .el-input__inner {
        box-shadow: none;
      }

      /deep/ .el-input__icon {
        line-height: 25px;
      }
    }
  }

  .categoryCom {
    margin-bottom: 20px;
  }

  .direction {
    p:nth-child(1) {
      text-align: left;
      height: 21px;
      line-height: 21px;
      margin-bottom: 16px;
    }

    .option {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 60px;

      .radioItem {
        // flex-grow: 1;
        text-align: left;
        display: inline-block;
        width: 30px;
      }
    }
  }

  .direction-option {
    display: flex;
    flex-direction: column;

    .direction-radioItem {
      margin-top: 8px;
    }

    /deep/ .el-radio__input.is-checked + .el-radio__label {
      height: 0;
      line-height: 0;
    }
  }

  .btn {
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4b71eb;
    border-radius: 2px;
    // margin: 16px;
    margin: 16px 16px 0 16px;
    color: #ffffff;
    cursor: context-menu;
  }
}
</style>
